$(document).ready(function() {
    // 初始化数据结构
    let languageData = {}
    let languages = []; // 存储语言名称
    let originalData = {}; // 存储初始数据，用于比较改动
    let changedCells = new Set(); // 存储有改动的单元格标识
    let firstFileKeys = []; // 存储第一个上传文件的字段顺序

    // 从localStorage加载数据
    loadFromLocalStorage();

    // 上传文件处理
    $('#file-upload').on('change', function(e) {
        const files = e.target.files;
        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            if (file.type === 'application/json' || file.name.endsWith('.json')) {
                const reader = new FileReader();
                const fileName = file.name;
                reader.onload = function(e) {
                    try {
                        const jsonData = JSON.parse(e.target.result);
                        addLanguageFromJson(fileName, jsonData);
                        // 更新原始数据
                        saveOriginalData();
                    } catch (error) {
                        alert(`文件 ${fileName} 不是有效的JSON格式`);
                    }
                };
                reader.readAsText(file);
            } else {
                alert(`文件 ${file.name} 不是JSON文件`);
            }
        }
        // 重置文件输入，以便能重复选择同一个文件
        this.value = '';
    });

    // 清空改动标记按钮
    $('#clear-changes').on('click', function() {
        clearChangeMarks();
    });

    // 添加语言数据并更新表格
    function addLanguageFromJson(langName, jsonData) {
        // 检查语言是否已存在
        if (languages.includes(langName)) {
            if (!confirm(`语言 ${langName} 已存在，是否覆盖？`)) {
                return;
            }
        } else {
            languages.push(langName);
            addNewLanguageColumn(langName);
        }

        // 如果是第一个上传的文件，记录字段顺序
        if (languages.length === 1) {
            firstFileKeys = Object.keys(jsonData);
        }

        // 更新数据
        for (const key in jsonData) {
            if (!languageData[key]) {
                languageData[key] = {};
            }
            languageData[key][langName] = jsonData[key];
        }

        // 更新表格内容
        updateTableContent();
        saveToLocalStorage();
    }

    // 添加新语言列
    function addNewLanguageColumn(langName) {
        // 添加表头
        const th = $('<th>', { contenteditable: 'true' }).text(langName);
    
        // 创建复制整列按钮
        const copyBtn = $('<button>', { class: 'copy-column-btn', contenteditable: "false" }).text('复制整列');
        copyBtn.on('click', function(e) {
            e.stopPropagation();
            e.preventDefault();
            copyColumnToClipboard(langName);
        });
        th.append(copyBtn);
    
        // 创建黏贴整列按钮
        const pasteBtn = $('<button>', { class: 'paste-column-btn', contenteditable: "false" }).text('黏贴整列');
        pasteBtn.on('click', function(e) {
            e.stopPropagation();
            e.preventDefault();
            showPasteModal(langName);
        });
        th.append(pasteBtn);
    
        th.on('blur', function() {
            const oldName = langName;
            const newName = ($(this).text().trim()).replace('复制整列', '').replace('黏贴整列', '').replace('已复制', '') || oldName;
    
            if (newName !== oldName) {
                // 更新语言名称
                const index = languages.indexOf(oldName);
                if (index !== -1) {
                    languages[index] = newName;
                }
                // 更新数据中的键
                for (const key in languageData) {
                    if (languageData[key][oldName] !== undefined) {
                        languageData[key][newName] = languageData[key][oldName];
                        delete languageData[key][oldName];
                        // 更新改动标记
                        const cellId = `${key}_${oldName}`;
                        if (changedCells.has(cellId)) {
                            changedCells.delete(cellId);
                            changedCells.add(`${key}_${newName}`);
                        }
                    }
                }
                // 更新原始数据中的键
                for (const key in originalData) {
                    if (originalData[key][oldName] !== undefined) {
                        originalData[key][newName] = originalData[key][oldName];
                        delete originalData[key][oldName];
                    }
                }
                // 更新复制按钮的语言名称
                copyBtn.off('click');
                copyBtn.on('click', function(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    copyColumnToClipboard(newName);
                });
                // 更新黏贴按钮的语言名称
                pasteBtn.off('click');
                pasteBtn.on('click', function(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    showPasteModal(newName);
                });
                langName = newName;
                saveToLocalStorage();
            }
        });
        $('#language-table thead tr').append(th);
    
        // 如果已有数据行，为每行添加新单元格
        if (!$.isEmptyObject(languageData)) {
            updateTableContent();
        }
    }

    // 更新表格内容
    function updateTableContent() {
        const tbody = $('#language-table tbody');
        tbody.empty();
    
        // 确定字段顺序：优先使用第一个文件的顺序，否则按字母排序
        let sortedKeys;
        if (firstFileKeys.length > 0) {
            // 首先包含第一个文件中的所有键，保持原有顺序
            sortedKeys = [...firstFileKeys];
            // 添加第一个文件中没有但后续文件中有的键，并按字母排序
            const otherKeys = Object.keys(languageData).filter(key => !firstFileKeys.includes(key)).sort();
            sortedKeys = [...sortedKeys, ...otherKeys];
        } else {
            // 如果没有第一个文件的顺序，则按字母排序
            sortedKeys = Object.keys(languageData).sort();
        }
    
        for (let i = 0; i < sortedKeys.length; i++) {
            const key = sortedKeys[i];
            const tr = $('<tr>');
            // 添加序号列
            const indexTd = $('<td>', { contenteditable: 'false' }).text(i + 1);
            tr.append(indexTd);
    
            // 添加字段列
            const keyTd = $('<td>', { contenteditable: 'true' }).text(key);
            keyTd.on('blur', function() {
                const oldKey = key;
                const newKey = $(this).text().trim() || oldKey;
                if (newKey !== oldKey) {
                    // 更新数据中的键
                    languageData[newKey] = languageData[oldKey];
                    delete languageData[oldKey];
                    // 更新原始数据中的键
                    if (originalData[oldKey]) {
                        originalData[newKey] = originalData[oldKey];
                        delete originalData[oldKey];
                    }
                    // 更新改动标记
                    for (const lang of languages) {
                        const cellId = `${oldKey}_${lang}`;
                        if (changedCells.has(cellId)) {
                            changedCells.delete(cellId);
                            changedCells.add(`${newKey}_${lang}`);
                        }
                    }
                    updateTableContent();
                    saveToLocalStorage();
                }
            });
            tr.append(keyTd);
    
            // 添加各语言列
            for (const lang of languages) {
                const value = languageData[key][lang] || '';
                const td = $('<td>', { contenteditable: 'true' }).text(value);
                // 检查是否有改动标记
                const cellId = `${key}_${lang}`;
                if (changedCells.has(cellId)) {
                    td.addClass('changed');
                }
                td.on('blur', function() {
                    const newValue = $(this).text().trim();
                    const oldValue = languageData[key][lang] || '';
                    if (newValue !== oldValue) {
                        languageData[key][lang] = newValue;
                        // 标记为改动
                        changedCells.add(cellId);
                        $(this).addClass('changed');
                    } else if (originalData[key] && originalData[key][lang] === newValue) {
                        // 如果改回原始值，则移除改动标记
                        changedCells.delete(cellId);
                        $(this).removeClass('changed');
                    }
                    saveToLocalStorage();
                });
                tr.append(td);
            }
    
            tbody.append(tr);
        }
    }

    // 保存原始数据用于比较
    function saveOriginalData() {
        originalData = JSON.parse(JSON.stringify(languageData));
    }

    // 清空改动标记
    function clearChangeMarks() {
        changedCells.clear();
        // 移除所有单元格的改动标记
        $('.changed').removeClass('changed');
        // 更新原始数据为当前数据
        saveOriginalData();
        // 保存到localStorage
        saveToLocalStorage();
    }

    // 保存到localStorage
    function saveToLocalStorage() {
        localStorage.setItem('languageData', JSON.stringify(languageData));
        localStorage.setItem('languages', JSON.stringify(languages));
        localStorage.setItem('changedCells', JSON.stringify(Array.from(changedCells)));
        localStorage.setItem('firstFileKeys', JSON.stringify(firstFileKeys));
    }

    // 从localStorage加载
    function loadFromLocalStorage() {
        const savedData = localStorage.getItem('languageData');
        const savedLanguages = localStorage.getItem('languages');
        const savedChangedCells = localStorage.getItem('changedCells');
        const savedFirstFileKeys = localStorage.getItem('firstFileKeys');

        if (savedData && savedLanguages) {
            try {
                languageData = JSON.parse(savedData);
                languages = JSON.parse(savedLanguages);
                if (savedChangedCells) {
                    changedCells = new Set(JSON.parse(savedChangedCells));
                }
                if (savedFirstFileKeys) {
                    firstFileKeys = JSON.parse(savedFirstFileKeys);
                }
                // 保存原始数据
                saveOriginalData();
                // 重建表格
                for (const lang of languages) {
                    addNewLanguageColumn(lang);
                }
                updateTableContent();
            } catch (error) {
                console.error('Failed to load data from localStorage:', error);
                // 如果加载失败，重置数据
                languageData = {};
                languages = [];
                changedCells = new Set();
                firstFileKeys = [];
            }
        }
    }

    // 清空所有数据
    function clearAllData() {
        languageData = {};
        languages = [];
        changedCells = new Set();
        originalData = {};
        $('#language-table thead tr').html('<th contenteditable="false">字段</th>');
        $('#language-table tbody').empty();
        localStorage.removeItem('languageData');
        localStorage.removeItem('languages');
        localStorage.removeItem('changedCells');
    }

    // 完成按钮
    $('#complete').on('click', function() {
        generateJsonOutput();
        $('#complete-modal').css('display', 'block');
    });

    // 清空按钮
    $('#clear-all').on('click', function() {
        $('#confirm-modal').css('display', 'block');
    });

    // 确认清空
    $('#confirm-yes').on('click', function() {
        clearAllData();
        $('#confirm-modal').css('display', 'none');
    });

    // 取消清空
    $('#confirm-no').on('click', function() {
        $('#confirm-modal').css('display', 'none');
    });

    // 关闭完成弹窗
    $('.close-btn').on('click', function() {
        $('#complete-modal').css('display', 'none');
    });

    // 点击弹窗外部关闭
    $(window).on('click', function(e) {
        if (e.target.id === 'complete-modal' || e.target.id === 'confirm-modal') {
            $(`#${e.target.id}`).css('display', 'none');
        }
    });

    // 留在页面
    $('#exit-stay').on('click', function() {
        $('#exit-modal').css('display', 'none');
        window.onbeforeunload = function() {
            return '现在退出内容将会丢失';
        };
    });

    // 离开页面
    $('#exit-leave').on('click', function() {
        $('#exit-modal').css('display', 'none');
        window.onbeforeunload = null;
        window.close(); // 尝试关闭窗口，如果是刷新则无法阻止
    });

    // 监听页面刷新或关闭
    window.onbeforeunload = function() {
        // 显示自定义弹窗
        setTimeout(function() {
            $('#exit-modal').css('display', 'block');
        }, 100);
        // 这个返回值在现代浏览器中可能不会显示，但必须返回一个非空值来触发确认对话框
        return '现在退出内容将会丢失';
    };

    // 防止表单提交
    $(document).on('submit', function(e) {
        e.preventDefault();
    });

    // 生成JSON输出
    function generateJsonOutput() {
        const jsonContainer = $('.json-container');
        jsonContainer.empty();

        for (const lang of languages) {
            const langData = {};
            for (const key in languageData) {
                langData[key] = languageData[key][lang] || '';
            }

            const jsonBox = $('<div>', { class: 'json-box' });
            jsonBox.append($('<h3>').text(lang));
            const pre = $('<pre>').text(JSON.stringify(langData, null, 2));
            jsonBox.append(pre);
            jsonBox.append($('<button>', { class: 'copy-btn' }).text('复制').on('click', function() {
                const textarea = $('<textarea>').val(JSON.stringify(langData, null, 2)).appendTo('body');
                textarea.select();
                document.execCommand('copy');
                textarea.remove();
                $(this).text('已复制');
                setTimeout(() => $(this).text('复制'), 2000);
            }));

            jsonContainer.append(jsonBox);
        }
    }

    // 复制整列数据到剪贴板
    function copyColumnToClipboard(langName) {
        let columnData = [];
        // 确定字段顺序：优先使用第一个文件的顺序，否则按字母排序
        let sortedKeys;
        if (firstFileKeys.length > 0) {
            // 首先包含第一个文件中的所有键，保持原有顺序
            sortedKeys = [...firstFileKeys];
            // 添加第一个文件中没有但后续文件中有的键，并按字母排序
            const otherKeys = Object.keys(languageData).filter(key => !firstFileKeys.includes(key)).sort();
            sortedKeys = [...sortedKeys, ...otherKeys];
        } else {
            // 如果没有第一个文件的顺序，则按字母排序
            sortedKeys = Object.keys(languageData).sort();
        }
    
        for (const key of sortedKeys) {
            const value = languageData[key][langName] || '---'; // 空行用---占位
            columnData.push(value);
        }
    
        // 将数组转换为带换行的字符串
        const textToCopy = columnData.join('\n');
    
        // 复制到剪贴板
        navigator.clipboard.writeText(textToCopy).then(function() {
            // 显示复制成功提示
            const btn = $('.copy-column-btn').filter(function() {
                return $(this).closest('th').text().includes(langName);
            });
            const originalText = btn.text();
            btn.text('已复制');
            setTimeout(function() {
                btn.text(originalText);
            }, 2000);
        }).catch(function(err) {
            console.error('无法复制到剪贴板: ', err);
            alert('复制失败，请手动复制');
        });
    }

    // 显示黏贴整列弹窗
    function showPasteModal(langName) {
        // 保存当前语言名称到弹窗元素
        $('#paste-modal').data('lang', langName);
        // 清空文本框
        $('#paste-textarea').val('');
        // 显示弹窗
        $('#paste-modal').css('display', 'block');
    }

    // 黏贴整列数据
    function pasteColumnFromText(langName, text) {
        // 获取当前表格的字段顺序
        let sortedKeys;
        if (firstFileKeys.length > 0) {
            sortedKeys = [...firstFileKeys];
            const otherKeys = Object.keys(languageData).filter(key => !firstFileKeys.includes(key)).sort();
            sortedKeys = [...sortedKeys, ...otherKeys];
        } else {
            sortedKeys = Object.keys(languageData).sort();
        }
    
        // 将文本按行分割
        const lines = text.split('\n');
    
        // 更新数据
        for (let i = 0; i < sortedKeys.length; i++) {
            const key = sortedKeys[i];
            const value = lines[i] !== undefined ? lines[i].trim() : '';
    
            if (!languageData[key]) {
                languageData[key] = {};
            }
    
            const oldValue = languageData[key][langName] || '';
            if (value !== oldValue) {
                languageData[key][langName] = value;
                // 标记为改动
                const cellId = `${key}_${langName}`;
                changedCells.add(cellId);
            }
        }
    
        // 更新表格
        updateTableContent();
        saveToLocalStorage();
    }

    // 关闭黏贴弹窗
    $('.close-btn').on('click', function() {
        $('#complete-modal').css('display', 'none');
        $('#confirm-modal').css('display', 'none');
        $('#exit-modal').css('display', 'none');
        $('#paste-modal').css('display', 'none');
    });

    // 点击弹窗外部关闭
    $(window).on('click', function(e) {
        if (e.target.id === 'complete-modal' || e.target.id === 'confirm-modal' || e.target.id === 'exit-modal' || e.target.id === 'paste-modal') {
            $(`#${e.target.id}`).css('display', 'none');
        }
    });

    // 黏贴整列 - 确认按钮
    $('#paste-confirm').on('click', function() {
        const langName = $('#paste-modal').data('lang');
        const text = $('#paste-textarea').val();
        if (langName) {
            pasteColumnFromText(langName, text);
        }
        $('#paste-modal').css('display', 'none');
    });

    // 黏贴整列 - 取消按钮
    $('#paste-cancel').on('click', function() {
        $('#paste-modal').css('display', 'none');
    });
});
